<!--
 * @version: v1.0
 * @Author: ItLy
 * @Date: 2019-11-22 15:54:17
 * @module: 
 -->
<template>
  <div class="lp">
    <!-- v-show="currentIndex>1" -->
    <div class="lp-left" :class="currentIndex < 2 ? 'lp-item-none' : ''">
      <label class="lp-home lp-item" @click="onHome">首页</label>
      <label class="lp-prev lp-item" @click="onPrev">上一页</label>
    </div>
    <div class="lp-center">
      <label @click="onItem(item)" v-for="item in getPageNumber()" :key="item.itemText" class="lp-item" :class="currentIndex == item.itemText ? 'lp-active' : ''">
        {{ item.itemText }}
      </label>
    </div>
    <!-- v-show="currentIndex<=lpTotal-6" -->
    <div class="lp-right" :class="currentIndex == lpTotal ? 'lp-item-none' : ''">
      <label class="lp-next lp-item" @click="onNext">下一页</label>
      <label class="lp-last lp-item" @click="onLast">末页</label>
    </div>
  </div>
</template>


<script>
export default {
  props: ["currentPage", "total"],
  computed: {
    lpTotal() {
      return Math.floor(this.total / 10) + 1;
    },
  },
  watch: {
    currentPage(newV, oldV) {},
  },
  data() {
    return {
      // total: 100,
      currentIndex: this.currentPage ? this.currentPage : 0,
      pages: [],
      isLast: false,
    };
  },
  methods: {
    // 获取当前展示区域
    getPageNumber() {
      // console.log("getPageNumber");
      
      let i = this.lpTotal < 6 ? 1 : this.currentIndex;
      let iz = this.lpTotal < 6 ? this.lpTotal + 1 : this.currentIndex + 6;
      if (this.isLast) {
        i =
          this.lpTotal < 6
            ? this.currentIndex - this.lpTotal + 1
            : this.currentIndex - 5;
        iz = this.currentIndex + 1;
      }
      let items = [];
      for (; i < iz; i++) {
        let item = {
          itemActive: false,
          itemText: i,
        };
        items.push(item);
      }
      if (this.lpTotal < this.currentIndex + 5 ) {
        // console.log(this.pages.length <= 0 ? items : this.pages);
        return this.pages.length <= 0 ? items : this.pages;
      }
    },
    // 点击item
    onItem(item) {
      this.isLast = false;
      this.currentIndex = item.itemText;
      this.$emit("onChange", this.currentIndex);
    },
    // 首页
    onHome() {
      this.isLast = false;
      this.currentIndex = 1;
      this.$emit("onChange", this.currentIndex);
    },
    // 最后一页
    onLast() {
      this.isLast = true;
      this.currentIndex = this.lpTotal;
      // console.log(this.lpTotal);
      this.$emit("onChange", this.currentIndex);
    },
    // 上一页
    onPrev() {
      this.isLast = false;
      this.currentIndex--;
      this.$emit("onChange", this.currentIndex);
    },
    // 下一页
    onNext() {
      this.isLast = false;
      this.currentIndex++;
      this.$emit("onChange", this.currentIndex);
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.lp {
  margin-top: 1rem;
  background: #fff;
  padding: 0.8rem 0.5rem;
  display: flex;
  justify-content: center;
  .lp-left,
  .lp-center,
  .lp-right {
    display: inline-block;
  }
  .lp-item {
    border: 1px solid #ccc;
    text-align: center;
    display: inline-block;
    margin-right: 0.2rem;
    font-size: 12px;
    padding: 0.4rem 1rem;
    cursor: pointer;
    border-radius: 2px;
    &:hover {
      background: #2b86e1;
      color: #fff;
      border-color: #2b86e1;
    }
  }
  .lp-active {
    background: #2b86e1;
    color: #fff;
    border-color: #2b86e1;
  }
  .lp-item-none {
    .lp-item {
      pointer-events: none;
      cursor: not-allowed;
      background-image: none;
      background-color: #fff;
      border-color: #ebeef5;
      color: #c0c4cc;
    }
  }
}
</style>
